<template>
	<view>
		<view class="banner" @click="goDetail(banner)">
			<!-- <image class="banner-img" :src="banner.cover"></image>
			<view class="banner-title">{{ banner.title }}</view> -->
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
				<uni-swipe-action :options="swipeOptions" :data="value"  @click="bindSwipe">
				<view  class="uni-media-list" :style="value.isCurrentShop==1?'background:#66FFFF;':''">
					<image class="uni-media-list-logo" :src="value.imgUrl||'/static/img/none.jpg'" @error="imageError(value)"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top" style="flex-wrap: wrap;">{{ value.shopName }}</view>
						<view class="uni-media-list-text-bottom" style="flex-wrap: wrap;">
							<text>{{ value.address }}</text>
							<text>{{ value.time }}</text>
						</view>
					</view>
				</view>
				</uni-swipe-action>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
		<uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="right"  vertical="bottom" direction="vertical" @trigger="trigger" />
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	var dateUtils = require('@/common/util.js').dateUtils;
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['userInfo','hasLogin']),
		components: {
			uniSwipeAction,
			uniLoadMore,
			uniFab
		},
		data() {
			return {
				swipeOptions:[{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, {
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				}],
				banner: {},
				listData: [],
				pageNum: 1,
				pages:1,
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				content:[{
					iconPath: '/static/component.png',
                    selectedIconPath: '/static/componentHL.png',
                    text: '添加门店',
					type:1,
					path:'/pages/shop/edit',
                    active: false
                }],
			};
		},
		onPullDownRefresh() {
			this.reload = true;
			this.pageNum = 1;
			this.getBanner();
			this.getList();
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		onShow() {
			if(!this.hasLogin){
				this.isLogin();
				return;
			}
			this.reload = true;
			this.pageNum = 1;
			this.getBanner();
			this.getList();
		},
		methods: {
			...mapMutations(['isLogin']),
			bindSwipe(e){
				var that=this;
				if(e.index===0){
					 uni.showModal({
						title: '提示',
						content: '是否确认删除该门店',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								let res =  that.$request.post("/shop/delete", {
									data: {id:e.data.id}
								});
								that.reload = true;
								that.pageNum = 1;
								that.getBanner();
								that.getList();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				if(e.index===1){
					var shop=encodeURIComponent(JSON.stringify({id:e.data.id,isCurrentShop:e.data.isCurrentShop}))
					uni.navigateTo({
						url: '/pages/shop/edit?shop=' + shop,
					});
				}
			},
			//浮动按钮事件
			trigger(e) {
				console.log(e)
				//this.content[e.index].active = !e.item.active
				if(e.item.type===1){
					uni.navigateTo({
						url: e.item.path,
					});
				}
				this.$refs.fab.close();
			},
			async getBanner() {
				uni.stopPullDownRefresh();
			},
			async getList() {
				if(this.pageNum>this.pages){
					return;
				}
				let data =await this.$request.get("/shop/listByPage", {
					data: {
						'userId': this.userInfo.id,
						'pageSize':10,
						'pageNum':this.pageNum
					}
				});
				var list = this.setTime(data.data.list);
				this.listData = this.reload ? list : this.listData.concat(list);
				this.pages=data.data.pages;
				this.reload = false;
				this.status =this.pageNum<this.pages?'more':'';
				console.log(this.status)
				if (this.pageNum==1&&data.data.list.length>0&&data.data.list[0].isCurrentShop==1) {
					uni.setStorage({
						key: 'currentShop',
						data: data.data.list[0]
					});
				}
				this.pageNum = this.pageNum+1;
			},
			goDetail: function(e) {
				// 				if (!/前|刚刚/.test(e.published_at)) {
				// 					e.published_at = dateUtils.format(e.published_at);
				// 				}
				let detail = {
					author_name: e.author_name,
					cover: e.cover,
					id: e.id,
					post_id: e.post_id,
					published_at: e.published_at,
					title: e.title
				};
			},
			setTime: function(items) {
				var newItems = [];
				items.forEach(e => {
					this.$set(e,'time',dateUtils.format(e.createDttm)); //正确姿势
					newItems.push(e);
				});
				return newItems;
			},
			imageError: function(item) {
				console.log(item);
				item.imgUrl='/static/img/none.jpg';
			}
		}
	}
</script>

<style>
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.uni-media-list-logo {
		width: 150upx;
		height: 100upx;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		height: 60upx;
		font-size: 30upx;
		overflow: hidden;
	}

	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
